<template>
  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <div class="btn-class">
        <!--<el-button type="primary" class="colorBlue" size="small" @click="addBigScreen">
          大屏多个++
        </el-button>-->
        <!--<el-button type="primary" class="colorBlue" size="small" @click="addBigScreen">
          大屏测试++
        </el-button>-->
        <el-button type="primary" class="colorBlue" size="small" @click="newBigScreen">
          新建大屏
        </el-button>
        <el-button type="danger" size="small" @click="delMoreGroup">
          删除
        </el-button>
        <!--
        服务器测试使用
        <el-link
          type="primary"
          :underline="false"
          @click.stop="enterScreen(row)"
        >
          进入大屏
        </el-link>-->
      </div>
    </template>
    <!--发布渠道-->
    <template v-slot:channel="{ row }">
      <div class="flex"><span :class="row.releaseChannel==1?'d-cls':'k-cls'">{{row.releaseChannel==1?'D音':'K手'}}</span></div>
    </template>
    <!--可发布视频数,需修改-->
    <template v-slot:publish="{ row }">
      <div class="flex">{{row.montageCount || 0}}/{{row.editingNumber || 0}}</div>
    </template>


    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="lookDetails(row.id)"
        >
          查看详情
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          @click.stop="enterScreen(row)"
        >
          进入大屏
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
      </div>
    </template>
    <!--新建大屏-->
    <new-screen ref="new" :visible.sync="newShow" @reload="reload"></new-screen>
    <!--进入大屏-->
    <!--<enter-screen :visible.sync="enterShow"></enter-screen>-->
    <!--查看大屏详情-->
    <look-detail ref="details" :visible.sync="detailShow"></look-detail>
  </ele-pro-table>
</template>

<script>
  import {
    deleteActivity,
    getActivity,
    getActivityes,
    submitDiyJob, submitImageJob,
    submitProjectJob
  } from "@/api/explosiveCode/releaseActivity";
  import {queryLargeScreen, delLargeScreen, addLargeScreen} from "@/api/explosiveCode/largeScreenLottery";
  import NewScreen from "@/views/explosiveCode/largeScreenLottery/components/new-screen";
  import EnterScreen from "@/views/explosiveCode/largeScreenLottery/components/enter-screen";
  import LookDetail from "@/views/explosiveCode/largeScreenLottery/components/look-detail";

  export default {
    name: "table-list",
    components: {LookDetail, EnterScreen, NewScreen},
    props: {
      screenForm:Array
    },
    data() {
      return {
        csFrom:{
          backgroundImage: "https://z4a.net/images/2023/08/18/Group-263950b924336c666948.png",
          largeScreenName: "大屏名称",
          largeScreenRules: "<p>t6er</p>",
          materialType: 1,
          merchantId: 263,
          montageType: 1,
          releaseChannel: 1,
          seoCopywriting: "标题",
          seoCopywritingId: 81,
          shareToPublish: 0,
          shopCodeId: 448,
          sponsors: [],
          editingNumber:8
        },

        // 当前编辑数据
        current: null,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'largeScreenName',
            label: '大屏名称',
            align: 'center',
            width:209,
            showOverflowTooltip: true
          },
          {
            prop: 'largeScreenCheckCount',
            label: '签到人数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'largeScreenWinnersCount',
            label: '中奖人数',
            align: 'center',
            showOverflowTooltip: true
          },
          /*{
            prop: 'shopCodeId',
            label: '关联活动',
            align: 'center',
            showOverflowTooltip: true
          },*/
          {
            prop: 'releaseChannel',
            label: '发布渠道 ',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'channel'
          },
          /*{
            prop: 'releaseChannel',
            label: '已生成视频数/需剪辑视频数 ',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'publish'
          },*/
          {
            prop: 'createTime',
            label: '创建时间',
            width: 200,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            width: 280,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
        newShow:false, // 新建大屏
        enterShow:false, // 进入大屏
        detailShow:false, // 查看大屏详情
      };
    },
    created(){
      this.init()
    },
    methods: {
      init(){
      },
     /* async datasource({ page, limit, where, order }) {
        // return ksPhotoList(token);
        const result = await queryLargeScreen({ ...where, ...order, page, limit, ...this.screenForm,
          merchantId: this.$store.state.user.info.merchantId,  // 商户id
        });
        console.log("result===========",result)
        this.$emit('largeCount',result.count)
        return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },*/
      /* 刷新————表格数据源 */
      datasource({ page, limit, where, order }) {
        return queryLargeScreen({ ...where, ...order, page, limit, ...this.screenForm,
          merchantId: this.$store.state.user.info.merchantId,  // 商户id
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // 循环加大屏++
      addBigScreen(){
          // for(let i=0;i<10;i++){
            this.csFrom.largeScreenName='测试'
            // this.csFrom.largeScreenName=this.csFrom.largeScreenName+i
            let parm= this.csFrom
            console.log("parm.largeScreenName", parm.largeScreenName)
            // 新建大屏
            addLargeScreen(parm)
              .then((data) => {
                // this.$message.success('新增成功!');
                console.log("data",data)
                this.submitTo()

              })
              .catch((e) => {
                this.$message.error(e);
              });
          // }
      },

      //  测试提交（可删除）
      submitTo(){
        // <!-- * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
        const typeApi = this.csFrom.montageType ==1 ? submitProjectJob : this.csFrom.montageType ==2 ? submitDiyJob : submitImageJob
        typeApi({
          id: this.csFrom.shopCodeId,//剪辑工程主键ID
          maximumCount:this.csFrom.editingNumber, //剪辑工程所属用户
          username:this.$store.state.user.info.username
        })
          .then((data) => {
            this.$message.success('新增成功!');
            console.log("确定提交22222222222",data,'this.form======',this.form)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // ‘新建大屏’ 弹框
      newBigScreen(e){
        this.newShow=true
        this.$nextTick(()=>{
          this.$refs['new'].show()
        })
      },

      // 删除
      delMoreGroup(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delGroups(ids)
      },
      /* 查看详情 */
      lookDetails (id) {
        this.detailShow=true
        this.$nextTick(()=>{
          this.$refs['details'].show(id)
        })
      },
      // 进入大屏
      enterScreen(row){
        // localStorage.setItem('isDatamonitor', true);
        // window.open('/explosiveCode/mianBigScreen');
        sessionStorage.setItem('isDatamonitor', true)
        console.log('进入isDatamonitor缓存为true')
        const { href } = this.$router.resolve({path:`/explosiveCode/mianBigScreen`,query:{id: row.id }})
        window.open(href, '_blank') // _blank 打开新的页面
      },

      /* 删除 */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该大屏, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delLargeScreen({
            ids:ids
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      }
    },
    watch: {

    }
  };
</script>

<style scoped lang="less">

  /*表格头部按钮*/
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0 20px;
      border-radius: 2px;
      height: 33px;
    }
  }
  .d-cls,.k-cls{
    width: 56px;
    height: 25px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .d-cls{
    color: #0C91F3;
    background-color: #DAEFFF;
  }
  .k-cls{
    color: #FFA800;
    background-color: #FFEBE0;
  }
  .input-css input[disabled] //disadled:后台不可接收此input传值
  {
    background:#dddddd; //为带有disabled的input框添加背景颜色
    pointer-events:none;//鼠标点击不可修改
  }
  .staut-class{
    padding: 2px;
    width: 50px;
    color: #31A952;
    background-color: #E4FFEC;
  }
  .leave{
    color: #999999;
    padding: 2px;
    width: 50px;
    background-color: #FFF5F4;
  }
</style>
